<template>
  <scroll-view
    class="recommend_view"
    scroll-y
    @scrolltolower="handleToLower"
    v-if="recommends.length > 0"
  >
    <!-- 推荐 -->
    <view class="recommend_wrap">
      <navigator :url="`/pages/album/index?id=${item.target}`" class="recommend_item" v-for="item in recommends" :key="item.id">
        <image :src="item.thumb" mode="widthFix"></image>
      </navigator>
    </view>
    <!-- 月份 -->
    <view class="monthes_wrap">
      <view class="monthes_title">
        <view class="monthes_title_info">
          <view class="monthes_info">
            <text>{{ monthes.DD }}</text>
            /{{ monthes.MM }}月
          </view>
          <view class="monthes_text">{{ monthes.title }}</view>
        </view>
        <view class="monthes_title_more">更多 ></view>
      </view>
      <view class="monthes_content">
        <view  class="monthes_item" v-for="(item,index) in monthes.items" :key="item.id">
          <go-detail :list="monthes.items" :index="index">
          <image
            mode="aspectFill"
            :src="item.img + item.rule.replace('$<Height>', 360)"
          ></image>
          </go-detail>
        </view>
      </view>
    </view>
    
    <!-- 热门 -->
    <view class="hots_wrap">
      <view class="hots_title">
        <text>热门</text>
      </view>
      <view class="hots_content">
        <view class="hots_item" v-for="(item,index) in hots" :key="item.id">
          <go-detail :list="item" :index="index">
          <image mode="widthFix" :src="item.thumb"></image>
          </go-detail>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import moment from "moment";
import GoDetail from '../../../components/goDetail.vue';
export default {
  name: "UniHomeRecommend",
  components: { GoDetail },
  data() {
    return {
      // 推荐列表
      recommends: [],
      // 月份
      monthes: {},
      // 热门
      hots: [],
      // 请求参数
      params: {
        // 要获取几条
        limit: 30,
        // 关键字
        order: "hot",
        // 跳过几条
        skip: 0,
      },
      hasMore:true
    };
  },

  mounted() {
    this.getList();
    uni.setNavigationBarTitle({title:"推荐"})
  },

  methods: {
    // 获取数据
    getList() {
      this.request({
        url: "http://service.picasso.adesk.com/v3/homepage/vertical",
        data: this.params,
      }).then((result) => {
        console.log(result);
        // 判断是否还有下一页数据
        if(result.res.vertical.length ===0){
          this.hasMore=false;
          return
        }
        // 判断是否是第一次请求数据
        if (this.recommends.length === 0) {
          // 头部推荐模块数据
          this.recommends = result.res.homepage[1].items;
          // 月份模块数据
          this.monthes = result.res.homepage[2];
          // 将时间戳改为普通模式   moment.js
          this.monthes.MM = moment(this.monthes.stime).format("MM");
          this.monthes.DD = moment(this.monthes.stime).format("DD");
        }

        // 获取热门数据列表
        // 数组拼接
        this.hots = [...this.hots, ...result.res.vertical];
        this.$store.commit('setImage',this.hots)
      });
    },
    // 滚动条触底事件
    handleToLower() {
      if(this.hasMore){
        // 当滚动条到底事件触发时，修改请求参数 skip+=limit
      this.params.skip += this.params.limit;
      // 重新发送请求
      this.getList();
      // 请求成功后 进行数据的叠加
      }
      else{
        uni.showToast({
          title:"没有更多图片了",
          icon:"none"
        })
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.recommend_view {
  // 屏幕的高度减去头部标签的高度
  height: calc(100vh - 36px);
}
.recommend_wrap {
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}
.monthes_wrap {
  .monthes_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    .monthes_title_info {
      color: $color;
      font-size: 30rpx;
      font-weight: 600;
      display: flex;
      .monthes_info {
        text {
          font-size: 40rpx;
        }
      }

      .monthes_text {
        font-size: 34rpx;
        color: #666;
        margin-left: 30rpx;
      }
    }

    .monthes_title_more {
      font-size: 24rpx;
      color: $color;
    }
  }
  .monthes_content {
    display: flex;
    flex-wrap: wrap;
    .monthes_item {
      width: 33.3%;
      border: 3rpx solid #fff;
    }
  }
}

.hots_wrap {
  .hots_title {
    padding: 20rpx;
    text {
      border-left: 10px solid $color;
      font-size: 40rpx;
      padding-left: 20rpx;
      font-weight: 600;
    }
  }

  .hots_content {
    display: flex;
    flex-wrap: wrap;
    .hots_item {
      width: 33.3%;
      border: 5rpx solid #fff;
      image {
      }
    }
  }
}
</style>